<script setup>
    import { RouterLink } from 'vue-router';
</script>

<template>
        <nav class="fixed bottom-0 left-0 right-0 bg-paper/90 border-t border-gray-200 backdrop-blur-sm z-50">
        <div class="flex justify-around items-center h-16 md:h-20">
            <RouterLink to="/" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-all duration-300 px-2 py-1 rounded-lg" active-class="!text-gold ">
                <i class="fa fa-home text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">首页</span>
            </RouterLink>
            <RouterLink to="/works" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-all duration-300 px-2 py-1 rounded-lg" active-class="!text-gold ">
                <i class="fa fa-th text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">优秀作品</span>
            </RouterLink>
            <RouterLink to="/detail" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-all duration-300 px-2 py-1 rounded-lg" active-class="!text-gold ">
                <i class="fa fa-info-circle text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">比赛详情</span>
            </RouterLink>
            <RouterLink to="/award" class="flex flex-col items-center justify-center text-ink hover:text-gold transition-all duration-300 px-2 py-1 rounded-lg" active-class="!text-gold ">
                <i class="fa fa-trophy text-xl md:text-2xl mb-1"></i>
                <span class="text-sm md:text-base font-kai">比赛大奖</span>
            </RouterLink>
        </div>
    </nav>

    <!-- 为底部导航栏添加内容间距 -->
    <div class="h-16 md:h-20"></div>
</template>

